<template>
  <div >
    <el-row style="padding:50px;font-size:25px;font-weight:bold">
      开店审核
    </el-row>
    <el-form label-width="120px">
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="店铺头像">
            <el-upload
              list-type="picture-card"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺实拍">
            <el-upload
              list-type="picture-card"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="主要产品图">
            <el-upload
              list-type="picture-card"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="营业证件">
            <el-upload
              list-type="picture-card"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="店铺名称">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
    <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="店铺分店名称">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="身份证号">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:10px">
        <el-col :span="8">
          <el-form-item label="身份证照">
            <el-upload
              list-type="picture-card"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="联系方式">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="邀请码">
            <el-input />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="收货方式">
            <div class="div">
              <el-radio v-model="radio" label="1">到店自提</el-radio>
            </div>
            <div class="div">
              <el-radio v-model="radio" label="2">同城配送</el-radio>
              <el-row style="margin-left:30px">
                <el-col :span="6">起配价: <input style="width:55px"/> 元</el-col>
                <el-col :span="6">配送费： <input style="width:55px"/> 元</el-col>
                <el-col :span="36">配送时间：<input　placeholder="9:00:00" style="width:75px"/></el-col>
                <el-col :span="36">　至　<input placeholder="22:00:00" style="width:75px"/></el-col>
              </el-row>
            </div>
            <div class="div">
              <el-radio v-model="radio" label="3">区域配送</el-radio>
               <el-row style="margin-left:30px">
                <el-col :span="6">起配价: <input style="width:55px"/> 元</el-col>
                <el-col :span="6">配送费： <input style="width:55px"/> 元</el-col>
                <el-col :span="36">配送时间：<input　placeholder="9:00:00" style="width:75px"/></el-col>
                <el-col :span="36">　至　<input placeholder="22:00:00" style="width:75px"/></el-col>
              </el-row>
            </div>
            <div class="div">
              <el-radio v-model="radio" label="4">跨城配送</el-radio>
               <el-row style="margin-left:30px">
                <el-col :span="6">配送费： <input style="width:55px"/> 元</el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="8">
          <el-form-item label="审核备注">
            <el-input
              type="textarea"
              :rows="5"
              resize='none'
              placeholder="请说明 审核通过 / 不通过 的原因"
              v-model="textarea">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="inline-info" style="padding:5px"  >
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" @click="$router.back()" class="btn">审核通过</el-button>
          </el-form-item>
          </el-col>
           <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="$router.back()" class="btn">审核不通过</el-button>
          </el-form-item>
          </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getStoreById } from '@/api/storeManage'
export default {
  data () {
    return {
      textarea: '',
      radio: '1',
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    async getStoreBase () {
      await getStoreById(this.$route.params.id)
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
img{
  width: 100%;
}
.div{
  width: 800px;
}
</style>
